<script lang="ts" setup>
import {useCategoryStore} from "@/stores/category";
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import BestList from "@/subPkg/categoryDetail/components/CategoryListItem.vue";


// 在加载时修改进入的位置
onLoad((options) => {
  const id = options?.id

  if (id) {
    current.value = categoryStore.categoryList.findIndex(item => item.id === Number(id))
    uni.setNavigationBarTitle({title: categoryStore.categoryList[current.value].name})
  }
  uni.setNavigationBarTitle({title: categoryStore.categoryList[current.value].name})
})
const categoryStore = useCategoryStore()

//tabs部分
const tabList = ref() // tab数组
const tabs = ref()
const barsStyle = { // 指示条的样式
  background: ' linear-gradient(45deg, #39c5bb, #f3f3f3)',
  borderRadius: ' 6rpx'
}
const activeStyle = { // 选中tab的样式
  color: '#39c5bb',
  transform: 'scale3d(1.15, 1.15, 1.15)',
  transition: 'all 0.15s ease-in-out',
}
const inactiveStyle = { // 未选中tab的样式
  color: '#999',
  transition: 'all 0.15s ease-in-out',
}
tabList.value = categoryStore.categoryList.map((item) => {
  return item.name
})
const current = ref(0) // 当前选中的tab索引

// tabs通知swiper切换
const tabsChange = (index: number) => {
  current.value = index
}
// swiper滑动中
const swiperTransition = (e: any) => {
  tabs.value.setDx(e.detail.dx)
}

// swiper滑动结束
const swiperAnimationfinish: UniHelper.SwiperOnAnimationfinish = (e) => {
  current.value = e.detail.current
  tabs.value.unlockDx()
  uni.setNavigationBarTitle({title: categoryStore.categoryList[current.value].name})
}

// 点击tabs右侧
const goCategoryDetail = () => {
  uni.navigateTo({url: '/subPkg/categoryDetail/categoryList/categoryList'})
}

// 点击详情
const descPopup = ref()
const showCategoryDesc = () => {
  // 全屏显示desc
  descPopup.value.open()
}
const closeDescPopup = () => {
descPopup.value.close()
}
</script>
<!-- 滑动切换选项卡演示(标准写法) -->
<template>
  <view style="height: 100%">
    <view
        style="width: 100%;height: 300rpx;overflow: hidden;position: relative">
      <text class="desc-mask text-white">{{ categoryStore?.categoryList[current].desc.substring(0, 100)}}
        <text v-show="categoryStore?.categoryList[current].desc.length>100" class="text-awGreen"
              @tap="showCategoryDesc"><text class="text-white">...</text> 详情
        </text>
      </text>
      <uv-image :src="categoryStore.categoryList[current].img" height="100%" mode="aspectFill" width="100%">
        <template v-slot:loading>
          <view>
            <aw-loader></aw-loader>
          </view>
        </template>
      </uv-image>
    </view>
    <!-- 使用z-paging-swiper为根节点可以免计算高度 -->
    <z-paging-swiper :cache-key="'best'" :swiper-style="{marginTop: '300rpx'}" use-cache>
      <view style="z-index: 100;position: sticky;top :0;">
        <z-tabs ref="tabs" :active-style="activeStyle"
                :bar-style="barsStyle" :current="current"
                :inactive-style="inactiveStyle"
                :list="tabList"
                bar-animate-mode="worm"
                bar-height="12rpx"
                bar-width="70rpx"
                bottom-space="6rpx"
                @change="tabsChange"
        >
          <template #right>
            <view class="bg-white flex justify-center align-center"
                  style="width: 70rpx;height: 70rpx;position: relative">
              <uni-icons color="#999" size="20" type="bars" @click="goCategoryDetail">
              </uni-icons>
              <view style="width: 30rpx;height: 100%;position: absolute;left: 0;
          transform: translate(-90%);
          background: linear-gradient(45deg,rgba(255,255,255,.5) 0,rgba(255,255,255,.7) 100%)"></view>
            </view>
          </template>
        </z-tabs>
      </view>
      <!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
      <swiper :current="current" class="swiper" @animationfinish="swiperAnimationfinish" @transition="swiperTransition">
        <swiper-item v-for="(item, index) in tabList" :key="index" class="swiper-item">
          <BestList :category-id="categoryStore.categoryList[current].id" :current-index="current"
                    :tab-index="index"></BestList>
        </swiper-item>
      </swiper>

      <template v-slot:bottom>
      </template>
    </z-paging-swiper>
  </view>
  <uni-popup ref="descPopup"   type="bottom" >
    <view style="height: 70vh;position: relative;border-radius: 20px 20px 0 0" class="flex flex-column align-center bg-white">
      <view style="position: absolute;top: 0;left: 0;right: 0;opacity: .1;z-index: 1" class="flex justify-center align-center padding-top-lg">
        <uv-image :src="'/static/category/'+categoryStore?.categoryList[current].id+'.png'" height="300" mode="aspectFit" width="300"></uv-image>
      </view>
      <view class="desc-text" style="z-index: 2">{{ categoryStore?.categoryList[current].desc }}</view>
      <view class="flex justify-end padding-right-xl" style="width: 100%;z-index: 2">
        <uni-link :href="'https://baike.baidu.com/item/' + categoryStore.categoryList[current].name" color="#39c5bb">百科链接</uni-link>
      </view>
      <button class="cu-btn line-awGreen round margin-top-xxl" hover-class=" bg-gradual-awGreen hover-color"
              style="width: 60%;height: 40px;z-index: 2;transition: all 0.1s ease-in-out;background-color: #EBF9F8FF;
              " @tap="closeDescPopup">收起</button>
    </view>
  </uni-popup>
</template>

<style>
.swiper {
  height: 100%;
}

.desc-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, .5);
  text-indent: 2rem;
  padding: 20rpx;
  opacity: .9;
  font-size: 14px;
  line-height: 1.5;
}

.desc-text {
  font-size: 16px;
  text-indent: 2rem;
  line-height: 1.5;
  padding: 40rpx;
}
.hover-color{
  color: #FFFFFF;
  transition: all 0.1s ease-in-out
}
</style>